
<style rel="stylesheet/scss" lang="scss" scoped>
    .detail-con {
        display: flex;
        flex: 1;
		height: 100%;
		position: relative;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		.detail-con__nav{
			width: 100px;
			height: 100%;
			display: flex;
			flex-direction: column;
			border-right: 1px solid #E5E5E5;
			-webkit-margin-before: 0em;
			-webkit-margin-after: 0em;
			-webkit-padding-start: 0px;
			overflow: auto;
			li{
				width: 100%;
				height: 40px;
				font-size: 14px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				border-bottom: 1px solid #E5E5E5;
				&.current{
					color: #409EFF;
				}
				&:last-child{
					border-bottom:none;
				}
			}
		}
		.detail-con__info{
			display: flex;
			flex: 1;
			padding: 20px;
			height: 100%;
			box-sizing: border-box;
			flex-direction: column;
			.icon-biangengcheliangyanse{
				font-size: 28px;
				color: #409EFF;
			}
			>p{
				display: flex;
				align-items: center;
				.w-input{
					width: 100px;
					margin-left: 10px;
				}
			}
			.info-model{
				display: flex;
				height: 100%;
			}
			.info-late{
				width: 100%;
				height: 100%;
				display: flex;
				.info-late__item{
					width: 25%;
					height: 400px;
					margin: 0 10px;
					position: relative;
					overflow: hidden;
					cursor: pointer;
					border: 1px solid #E5E5E5;
					>img{
						width: 100%;
						height: 100%;
					}
					&.current{
						border: 3px solid #409EFF;
					}
					&.current .check,{
						position: absolute;
						width: 40px;
						height: 40px;
						background: #409EFF;
						right: -20px;
						top: -20px;
						transform: rotate(45deg);
						&::after{
							position: absolute;
							content: "\e61a";
							color: #fff;
							top: 24px;
							left: 19px;
							transform: translateX(-50%) rotate(-46deg);
						}
					}
					&:hover{
						border: 3px solid #409EFF;
						>.check{
							position: absolute;
							width: 40px;
							height: 40px;
							background: #409EFF;
							right: -20px;
							top: -20px;
							transform: rotate(45deg);
							&::after{
								position: absolute;
								content: "\e61a";
								color: #fff;
								top: 24px;
								left: 19px;
								transform: translateX(-50%) rotate(-46deg);
							}
						}
					}
				}
			}
		}
		.savv-btn{
			position: absolute;
			bottom: 10px;
			height: 40px;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: center;
		}
		.detail-con_er{
			padding-left: 10px;
			color: #409EFF;
			margin-bottom: 10px;
		}
    }
</style>
<template>
	<div class="detail-con">
		<ul class="detail-con__nav">
			<li  :class="{'current': currentIndex == -1}" @click="selectNavFn(-1)">主题颜色</li>
			<template v-if="firstCatList && firstCatList.length>0">
				<li v-for="(item, index) in firstCatList" :class="{'current': currentIndex == index}" @click="selectNavFn(index, item)">{{item.catName}}</li>
			</template>
		</ul>
		<!--主题颜色模板-->
		<div class="detail-con__info" v-if="currentIndex == -1">
			<p>
				<span class="iconfont icon-biangengcheliangyanse m-r-10"></span>
				主题颜色
				<el-input type="text" class="w-input" size="mini" v-model="themeColors"/>
				<el-color-picker v-model="themeOrColors" class="m-l-10" @change="colorChange"></el-color-picker>
			</p>
			<div style="color: #409EFF;">预览效果</div>
			<div class="info-model">
				<!--模板样式-->
				<wx-index-late :icon="indexIcon" :title="indexTitle" :color="themeColors"></wx-index-late>
				<wx-detail-late :icon="detailIcon" :title="detailTitle" :color="themeColors"></wx-detail-late>
			</div>
		</div>
		
		<!--配置不同分类的下的模板-->
		<div class="detail-con__info" v-else>
			<span class="detail-con_er">选择样式</span>
			<div class="info-late">
				<div class="info-late__item" @click="selectDetailStyleFn(1,'style1')" :class="{'current': currentStyle == 'style1'}">
					<span class="check iconfont"></span>
				</div>
				<div class="info-late__item" @click="selectDetailStyleFn(2,'style2')" :class="{'current': currentStyle == 'style2'}">
					<img :src="liIcon">
					<span class="check iconfont"></span>
				</div>
				<div class="info-late__item" @click="selectDetailStyleFn(3,'style3')" :class="{'current': currentStyle == 'style3'}">
					<img :src="xdlIcon">
					<span class="check iconfont"></span>
				</div>
				<!-- <div class="info-late__item" @click="selectDetailStyleFn(4,'style4')" :class="{'current': currentStyle == 'style4'}">
					<span class="check iconfont"></span>
				</div> -->
			</div>
		</div>
		<div class="savv-btn">
			<el-button  type="primary" @click="saveConfigFn">保存</el-button>
		</div>
	</div>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import indexIcon from '@/assets/index.png'
	import detailIcon from '@/assets/detail.png'
	import xdlIcon from '@/assets/xdl-icon.png'
	import liIcon from '@/assets/li-icon.png'
	import wxIndexLate from './child/wx-index-late.vue'
	import wxDetailLate from './child/wx-detail-late.vue'
	export default{
		data(){
			return {
				currentIndex: -1,
				themeColors: '',
				themeOrColors:'',
				firstCatList: [],
				currentStyle: "style1",
				xdlIcon: xdlIcon,
				liIcon: liIcon,
				indexIcon: indexIcon,
				indexTitle:'首页',
				detailTitle:'配件详情',
				detailIcon: detailIcon
			}
		},
		created() {
			this._getConfigStyle()
		},
		watch:{
			themeColors(val) {
				if(!val){
					this.themeOrColors = ''
				}
			}
		},
		methods: {
			colorChange(e){
				console.log(e)
				this.themeColors = e;
			},
			_getConfigStyle() {
				this.$ajax({
					api:'merchant/category/style',
					params: {
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							''
					}
				}).then(res => {
					console.log(res)
					if(res.status ===  SUCCESS_REQUEST_STATUS) {
						this.themeColors = res.data.themeColor
						this.firstCatList = res.data.catStyle
					}
				})
			},
			/**
			* @desc 选择分类模板
			* @param index 分类索引
			*/
			selectNavFn(index, item = '') {
				this.currentIndex = index
				console.log(item)
				if(item) {
					this.currentStyle = item.style
				}
				console.log(this.currentStyle)
			},
			/**
			* @desc 选择详情模板
			* @param num 当前选择第几个
			*/
			selectDetailStyleFn(num, style) {
				console.log(num)
				this.currentStyle = style
				this.firstCatList[this.currentIndex].style = style
			},
			saveConfigFn() {
				console.log(this.themeColor)
				this.$ajax({
					api: 'merchant/category/style/save',
					contentType: true,
					params: {
						style:this.firstCatList,
						themeColor: this.themeColors,
						token: getToken(),	
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :''
					}
				}).then(res => {
					console.log(res)
					if(res.status === SUCCESS_REQUEST_STATUS) {
						this.$message({
							type:'success',
							message:'保存成功'
						})
					}
				}).catch(err => {
					this.$message({
						type:'error',
						message:err.message
					})
				})
			},
		},
		components: {
			wxDetailLate,
			wxIndexLate
		}
	}
</script>